<template>
  <div class="comment-container">
    <h3 class="com-header">商品评价</h3>
    <div class="com-total">
      <div class="com-t-lf">
        <div class="score">
          <span class="red">99%</span>
          好评
        </div>
        <div class="com-num">共有{{ commentCount.total }}人参与评论</div>
      </div>
      <div class="com-t-mid"></div>
      <div class="com-t-rt">
        <div class="com-tooltip">当前还未购买本商品,暂无法进行评论</div>
        <el-button icon="Edit" color="#1aa684" @click="handleComment"
          >评价商品</el-button
        >
      </div>
    </div>
    <div class="com-box" v-show="isComment">
      <el-form :model="form" ref="formRef">
        <el-form-item label="评分" prop="score">
          <el-rate v-model="form.score" size="large" />
        </el-form-item>
        <el-form-item label="图片">
          <image-upload v-model="form.img"></image-upload>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form.content"
            type="textarea"
            placeholder="请输入评论"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button color="#1aa684" @click="addCommentForm">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="com-list-box">
      <div class="com-list-header">
        <el-tabs
          v-model="queryParams.queryCondition"
          @tab-change="getCommentList"
        >
          <el-tab-pane
            :label="`全部评价(${commentCount.total})`"
            :name="-1"
          ></el-tab-pane>
          <el-tab-pane
            :label="`好评(${commentCount.good})`"
            :name="0"
          ></el-tab-pane>
          <el-tab-pane
            :label="`中评(${commentCount.mid})`"
            :name="1"
          ></el-tab-pane>
          <el-tab-pane
            :label="`差评(${commentCount.bad})`"
            :name="2"
          ></el-tab-pane>
          <el-tab-pane
            :label="`有图(${commentCount.hasImg})`"
            :name="3"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <ul class="com-list">
        <li class="com-item" v-for="item in list" :key="item.id">
          <div class="com-text">
            <div class="com-item-lf">
              <el-avatar></el-avatar>
            </div>
            <div class="com-item-mid">
              <div class="com-user">
                <span> {{ item.memberNickName }}</span>
                <span style="margin-left: 10px">{{ item.createTime }}</span>
              </div>
              <div class="com-content">
                <MPreview :fileList="item.resources" />
                <div>{{ item.content }}</div>
              </div>
            </div>
            <div class="com-item-rt">
              <el-rate v-model="item.star" :disabled="true" />
            </div>
          </div>
          <div
            class="com-reply"
            v-for="reply in item.replyList"
            :key="reply.id"
          >
            <div class="reply-user">商家回复</div>
            <div class="reply-content">{{ reply.content }}</div>
          </div>
        </li>
      </ul>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getCommentList"
    />
  </div>
</template>
<script setup>
import { getCurrentInstance, watch } from "vue";
import {
  listComment,
  postOrderComment,
  addReplyComment,
} from "@/api/mall/client/order/comment";
import MPreview from "@/components-mall/MPreview";
import { useRouter } from "vue-router";
const isComment = ref(false);
const form = ref({});
const { proxy } = getCurrentInstance();
const router = useRouter();

// 查询评论列表
const props = defineProps({
  spuId: {
    type: Number,
  },
});
const list = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  queryCondition: -1,
  spuId: props.spuId,
});
const commentCount = ref({
  total: 0,
  good: 0,
  mid: 0,
  bad: 0,
  hasImg: 0,
});
console.log("PORPS", props.spuId);
const getCommentList = async () => {
  queryParams.value.spuId = props.spuId;
  const res = await listComment(queryParams.value);
  list.value = res.rows;
  commentCount.value.total = res.extra.statistics.total;
  commentCount.value.good = res.extra.statistics.goodComment;
  commentCount.value.mid = res.extra.statistics.middleComment;
  commentCount.value.bad = res.extra.statistics.badComment;
  commentCount.value.hasImg = res.extra.statistics.hasResource;
  // 转换json
  list.value.map((item) => {
    item.resources = JSON.parse(item.resources);
  });
  total.value = res.total;
};

// 添加评论
const handleComment = () => {
  // isComment.value = true;
  router.push({
    path: "/user",
    query: {
      tab: "Order",
    },
  });
};
const formRef = ref();
const addCommentForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log("comment", form.value);
      proxy.$modal.msgSuccess("评价成功！");
      isComment.value = false;
    } else {
      console.log("error");
    }
  });
};
watch(
  () => props.spuId,
  (val) => {
    if (val) {
      getCommentList();
    }
  }
);
</script>

<style lang="scss" scoped>
:deep(.el-tabs__item.is-active) {
  color: #1aa684;
}
:deep(.el-tabs__active-bar) {
  background-color: #1aa684;
}
:deep(.el-tabs__item:hover) {
  color: #1aa684;
}
:deep(.el-pagination) {
  --el-pagination-hover-color: #1aa684;
  --el-color-primary: #1aa684;
}
:deep(.el-select-dropdown__item.selected) {
  color: #1aa684 !important;
}
.com-reply {
  background: #f4f4f4;
  margin-left: 60px;
  margin-top: 0px;
  font-size: 14px;
  padding: 10px;
  .reply-user {
    margin-bottom: 10px;
    color: #444141;
    letter-spacing: 0.5px;
  }
  .reply-content {
    color: #625d5d;
  }
}
.comment-container {
  background: #fff;
  padding: 20px;
  position: relative;
  border-top: 3px solid #45b584;
  .com-header {
    font-size: 17px;
    font-weight: 600;
    color: #45b584;
  }
  .com-total {
    display: flex;
    border-bottom: 1px solid rgb(243 244 246);
    .com-t-lf {
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      .score {
        font-size: 14px;
        .red {
          font-size: 20px;
          font-weight: 300;
        }
      }
      .com-num {
        font-size: 15px;
        color: #9ca3af;
      }
    }
    .com-t-mid {
      width: 30%;
    }
    .com-t-rt {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 20px;
      .com-tooltip {
        color: #9ca3af;
        font-size: 14px;
        padding-bottom: 10px;
      }
    }
  }
  .com-list {
    .com-item {
      padding: 10px 0;
      border-bottom: 1px solid rgb(243 244 246);
      .com-text {
        display: flex;
      }
      .com-item-lf {
        width: 60px;
      }
      .com-item-mid {
        width: 70%;
        .com-user {
          color: #9ca3af;
          display: flex;
          align-items: center;
        }
        .com-time {
          color: #9ca3af;
          display: flex;
          // justify-content: flex-end;
        }
        .com-content {
          padding: 15px 0 5px 0;
          .video {
            width: 50px;
            height: 50px;
          }
        }
      }
    }
  }
  .com-item-rt {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex: 1;
    .com-score {
      font-size: 14px;
    }
  }
  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    :deep(.el-pager) {
      li:hover {
        color: #45b584;
      }
    }
    :deep(.el-pagination.is-background) {
      li.is-active {
        background: #45b584;
        color: #fff;
      }
    }
  }
}

:deep(.el-upload--picture-card:hover) {
  border-color: #45b584;
  color: #45b584;
}

.el-upload:focus {
  border-color: #45b584;
  color: #45b584;
}
:deep(.el-textarea__inner:focus) {
  border-color: #45b584;
  box-shadow: 0 0 0 1px #45b584;
}
</style>
